import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';
import { Icon } from 'antd';
import globalStyles from '../../style/common.less';

const modalRoot = document.getElementById('dialog-root');

class TechnologyInnovationTopChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('TechnologyInnovationTopChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 280,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }

  setChartData() {
    const option = {
      color: ["#3cefff"],
      tooltip: {},
      grid: {
        top: '8%',
        left: '3%',
        right: '20%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: [{
        type: "category",
        data: ["安庆", "亳州", "淮北", "宿州"],
        axisTick: {
          alignWithLabel: true
        },
        nameTextStyle: {
          fontSize:'12px',
          color: "#82b0ec"
        },
        axisLine: {
          lineStyle: {
            color: "#82b0ec"
          }
        },
        splitLine: {
          lineStyle: {
            color: "#0c2c5a"
          },
          show:false
        },
        axisLabel: {
          textStyle: {
            color: "#82b0ec"
          }
        }
      }],
      yAxis: [{
        type: "value",
        axisLabel: {
          textStyle: {
            color: "#82b0ec"
          },
          formatter: "{value}%"
        },
        splitLine: {
          lineStyle: {
            color: "#0c2c5a"
          }
        },
        axisLine: {
          show: false
        }
      }],
      series: [{
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, -5],
        symbolPosition: "end",
        z: 12,
        label: {
          normal: {
            show: true,
            position: "top",
            formatter: "{c}%"
          }
        },
        data: [54.8, 50.8, 43.9, 43.4]
      }, {
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, 5],
        z: 12,
        data: [54.8, 50.8, 43.9, 43.4]
      }, {
        type: "bar",
        itemStyle: {
          normal: {
            opacity: 0.7
          }
        },
        barWidth: "20",
        data: [54.8, 50.8, 43.9, 43.4],
        markLine: {
          silent: true,
          symbol: "none",
          label: {
            position: "middle",
            formatter: "{b}"
          },
          data: [{
            name: "平均值",
            yAxis: 22.7,
            lineStyle: {
              color: "#ffc832"
            },
            label: {
              position: "end",
              formatter: "{b}\n {c}%"
            }
          }]
        }
      }]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `协同创新核心指标增长率 TOP4`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
            {/* <Icon
              type="close"
              className={`${globalStyles.cursor_style_pointer}`}
              style={{ fontSize: 18 }}
              onClick={this.props.onClose}
            /> */}
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default TechnologyInnovationTopChart;
